<template>
	<view class="box">
		<view class="ct_link">
			<view class="list padding" @click="clk(0)">
				<view class="link">{{i18n.avatar}}</view>
				<view class="avatar-img">
					
					<image class="user-avatar" v-if="userInfo.avatar" :src="userInfo.avatar" mode="aspectFill"></image>
					<image class="user-avatar" v-else src="../../static/img/indexImg/toux.png" mode="aspectFill"></image>
					<text class="iconfont">&#xe600;</text>
				</view>
			</view>
			<navigator url="nick" class="list padding">
				<view class="link">{{i18n.nickname}}</view>
				<view class='nick-name'>{{ userInfo.nickname || i18n.setNickname }} <text class="iconfont">&#xe600;</text></view>
			</navigator>
			<view class="list padding">
				<view class="link">UID</view>
				<view class='nick-name'>{{ userInfo.id || '--' }}</view>
			</view>
		</view>
		<avatar @upload="doUpload" @avtinit="doBefore" quality="0.8" ref="avatar"></avatar>
	</view>
</template>

<script>
	import avatar from "../../components/yq-avatar/yq-avatar.vue";
	export default {
		data() {
			return {
				img: '', //头像预览
				userInfo: {},
				name: '',
			};
		},
		components: {
			avatar
		},
		onShow() {
			this.fetchUserInfo()
			uni.setNavigationBarTitle({
			 title: this.$t('personal.personal')
			})
		},
		computed:{
			i18n() {
				return this.$t('personal');
			},
		},
		methods: {
			doBefore() {
			
			},
			fetchUserInfo(){
				this.userInfo = this.$getStore('ucenterInfo',true)
				this.$post('api/ucenter/info')
				.then(res => {
					this.userInfo = res.data
					this.$setStore('ucenterInfo', res.data, true)
				})
			},
			clk(index) {
				this.$refs.avatar.fChooseImg(index, {
					selWidth: '350upx',
					selHeight: '350upx',
					expWidth: '260upx',
					expHeight: '260upx',
					inner: index ? 'true' : 'false'
				});
			},
			doUpload(rsp) {
				this.img = rsp.path
				this.$upload('api/ucenter/setavatar', rsp.path, 'file', {}, (res) => {
					let imgLink = res.data
					console.log(res)
					this.$toast(res.msg);
					setTimeout(res => {
						uni.navigateBack({
							delta:1
						})
					}, 2000)
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.padding {
		
	}
	.ct_link {
		padding-top:20upx ;
		padding: 0 30upx;
		.list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid var(--border);
			height: 100upx;
		}

		.avatar-img {
			display: flex;
			align-items: center;
			.user-avatar {
				width: 80upx;
				height: 80upx;
				border-radius: 50%;
			}
		}

		

		.link {
			font-size: 28upx;
			flex: 1;
		}

		.nick-name {
			color: var(--txt-color);
			font-size: 28upx;
		}
	}
	.iconfont {
		font-size: 28upx;
		color: var(--txt-color);
		margin-left: 20upx;
	}
</style>
